<!doctype html>
<html>

<head>
    <title>Custom interval</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
        body {
            text-align: center;
        }

        #g1,
        #g2,
        #g3 {
            width: 200px;
            height: 160px;
            display: inline-block;
            margin: 1em;
        }

        p {
            display: block;
            width: 450px;
            margin: 2em auto;
            text-align: left;
        }
    </style>
</head>

<body>
    <div id="g1"></div>
    <div id="g2"></div>
    <div id="g3"></div>
    <p>
        You need to measure, say, between 350 and 980? No problem, just tell it to justGage. Displayed value and color
        are calculated as a percentage in defined range, with optional min and max labels shown.
    </p>
    <p>
        Also, if displayed value is out of range, relax and kick your feet up - justGage will take care of it for you.
    </p>
    <script src="../raphael.min.js"></script>
    <script src="../justgage.js"></script>
    <script>
        var g1, g2, g3;

        /** Random integer  */
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        document.addEventListener("DOMContentLoaded", function (event) {
            g1 = new JustGage({
                id: "g1",
                value: getRandomInt(350, 980),
                min: 350,
                max: 980,
                title: "Lone Ranger",
                label: "miles traveled"
            });

            g2 = new JustGage({
                id: "g2",
                value: 32,
                min: 50,
                max: 100,
                title: "Empty Tank",
                label: ""
            });

            g3 = new JustGage({
                id: "g3",
                value: 120,
                min: 50,
                max: 100,
                title: "Meltdown",
                label: ""
            });

            setInterval(function () {
                g1.refresh(getRandomInt(350, 980));
                g2.refresh(getRandomInt(0, 49));
                g3.refresh(getRandomInt(101, 200));
            }, 2500);
        });
    </script>
</body>

</html>